<!--
 * @Author: mindaier 844199821@qq.com
 * @Date: 2023-12-07 10:24:29
 * @LastEditors: mindaier 844199821@qq.com
 * @LastEditTime: 2023-12-20 09:04:38
 * @FilePath: /meet-panel/index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/element-plus.css" />
    <link rel="stylesheet" href="./css/element-theme-chalk.css" />
    <link rel="stylesheet" href="./css/index.css" />

    <script src="./js/vue3.global.js"></script>
    <script src="./js/dayjs.js"></script>
    <script src="./js/dayjs.loocal.js"></script>
    <script src="./js/element-plus.js"></script>
    <script src="./js/element-plus-icons-vue.js"></script>
    <script src="./js/element-local.js"></script>
    <title>meeting-panel</title>
  </head>
  <body>
    <div id="app">
      <div class="meeting-panel-page">
        <div class="content-wrap">
          <div class="content-header">
            <div class="header-left">
              <el-radio-group
                v-model="state.dateType"
                label="label position"
                @change="changeDateType"
              >
                <el-radio-button label="daily">日</el-radio-button>
                <el-radio-button label="weekly">周</el-radio-button>
                <el-radio-button label="monthly">月</el-radio-button>
              </el-radio-group>
              <el-button
                type="default"
                class="date"
                :disabled="disabled"
                @click="toCurrentDate"
              >
                {{ state.dateType === "daily" ? "今天" : state.dateType ===
                "weekly" ? "本周" : "本月" }}
              </el-button>
            </div>
            <div class="date-select">
              <div>
                <div class="date-select-box" v-if="state.dateType === 'daily'">
                  <div class="arrow-left" @click="preDate"></div>
                  <div class="date-text">{{state.dailyDate}}</div>
                  <div class="arrow-right" @click="nextDate"></div>
                </div>
              </div>
              <div>
                <div class="date-select-box" v-if="state.dateType === 'weekly'">
                  <div class="dbl-arrow-left" @click="preYear"><<</div>
                  <div class="arrow-left" @click="preDate"></div>
                  <div class="date-text">{{state.weekDate}}</div>
                  <div class="arrow-right" @click="nextDate"></div>
                  <div class="dbl-arrow-right" @click="nextYear">>></div>
                </div>
              </div>
              <div>
                <div class="date-select-box" v-if="state.dateType === 'monthly'">
                  <div class="arrow-left" @click="preDate"></div>
                  <div class="date-text">{{state.monthDate}}</div>
                  <div class="arrow-right" @click="nextDate"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="main" v-if="state.dateType === 'daily'">
            <div class="timescale">
              <div class="empty-item"></div>
              <div class="timescale-items">
                <div
                  class="timescale-item"
                  v-for="(item, index) in tableConfig"
                  :key="index"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="meeting-room-collapse">
              <!-- <div class="curTimeLine" :style="getCurTimeLineLeft"></div> -->
              <el-collapse v-model="activeNames">
                <el-collapse-item title="会议室" :name="1">
                  <div class="meeting-rooms-wrap">
                    <div
                      class="meeting-room"
                      v-for="item1 in state.meetingRoomInfo"
                      :key="item1.roomId"
                    >
                      <div class="meeting-room-name">
                        {{item1.roomName}}
                        <span class="room-desc">
                          可容纳{{ item1.seatCount }} 人
                          <el-tag class="room-desc-tag" type="warning"
                            >{{getStatusStr(item1.status) }}</el-tag
                          >
                        </span>
                      </div>
                      <div class="meeting-room-state" id="meetingRoom">
                        <div
                          ref="cellRef"
                          class="meeting-room-state-item"
                          v-for="(subitem, subindex) in tableConfig"
                          :key="subindex"
                        >
                          <div class="vertical-line"></div>
                        </div>
                        <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top-start"
                          v-for="(item2,index2) in state.roomAppsInfo"
                          :key="index2"
                        >
                          <template #content>
                            <div class="custom-tooltip">
                              <div class="date-range">
                                {{item2.appBeginDate.split(' ')[1]}} - {{item2.appEndDate.split(' ')[1]}}
                              </div>
                              <div class="user-name">
                                申请人:
                                <span class="name-text"
                                  >{{item2.perName}}</span
                                >
                              </div>
                              <div class="use-to">
                                用途: {{item2.description}}
                              </div>
                            </div>
                          </template>
                          <div class="gray-bg" :style="getGrayBgStyle(item2)"></div>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>

          <div class="main" v-if="state.dateType === 'weekly'">
            <div class="timescale">
              <div class="empty-item"></div>
              <div class="timescale-items">
                <div
                  class="timescale-item"
                  v-for="(item, index) in tableConfig1"
                  :key="index"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="meeting-room-collapse">
              <!-- <div class="curTimeLine"></div> -->
              <el-collapse v-model="activeNames">
                <el-collapse-item
                  title="会议室"
                  :name="1"
                >
                  <div class="meeting-rooms-wrap">
                    <div
                      class="meeting-room"
                      v-for="item1 in state.meetingRoomInfo"
                      :key="item1.roomId"
                    >
                      <div class="meeting-room-name">
                        {{item1.roomName}}
                        <span class="room-desc">
                          可容纳{{ item1.seatCount }} 人
                          <el-tag class="room-desc-tag" type="warning"
                            >{{getStatusStr(item1.status) }}</el-tag
                          >
                        </span>
                      </div>
                      <div class="meeting-room-state" id="meetingRoom">
                        <div
                          ref="cellRef"
                          class="meeting-room-state-item"
                          v-for="(subitem, subindex) in tableConfig1"
                          :key="subindex"
                        ></div>
                        <template
                          v-for="(item2,index2) in state.roomAppsInfo"
                          :key="index2"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="light"
                            placement="top-start"
                          >
                            <template #content>
                              <div class="custom-tooltip">
                                <div class="date-range">
                                  {{item1.appBeginDate.split(' ')[1]}} -
                                  {{item1.appEndDate.split(' ')[1]}}
                                </div>
                                <div class="user-name">
                                  申请人:
                                  <span class="name-text"
                                    >{{item1.perName}}</span
                                  >
                                </div>
                                <div class="use-to">
                                  用途: {{item1.description}}
                                </div>
                              </div>
                            </template>
                            <div class="gray-bg" :style="getGrayBgStyle(item2)"></div>
                          </el-tooltip>
                        </template>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>

          <div class="main" v-if="state.dateType === 'monthly'">
            <div class="timescale">
              <div class="empty-item"></div>
              <div class="timescale-items">
                <div
                  class="timescale-item"
                  v-for="(item, index) in tableConfig2"
                  :key="index"
                >
                  {{ item.label }}
                </div>
              </div>
            </div>
            <div class="meeting-room-collapse">
              <!-- <div class="curTimeLine"></div> -->
              <el-collapse v-model="activeNames">
                <el-collapse-item
                  title="会议室"
                  :name="1"
                >
                  <div class="meeting-rooms-wrap">
                    <div
                      class="meeting-room"
                      v-for="item1 in state.meetingRoomInfo"
                      :key="item1.roomId"
                    >
                      <div class="meeting-room-name">
                        {{item1.roomName}}
                        <span class="room-desc">
                          可容纳{{ item1.seatCount }} 人
                          <el-tag class="room-desc-tag" type="warning"
                            >{{getStatusStr(item1.status) }}</el-tag
                          >
                        </span>
                      </div>
                      <div class="meeting-room-state" id="meetingRoom">
                        <div
                          ref="cellRef"
                          class="meeting-room-state-item"
                          v-for="(subitem, subindex) in tableConfig2"
                          :key="subindex"
                        ></div>
                        <template
                          v-for="(item2,index2) in state.roomAppsInfo"
                          :key="index2"
                        >
                          <el-tooltip
                            class="box-item"
                            effect="light"
                            placement="top-start"
                          >
                            <template #content>
                              <div class="custom-tooltip">
                                <div class="date-range">
                                  {{item1.appBeginDate.split(' ')[1]}} -
                                  {{item1.appEndDate.split(' ')[1]}}
                                </div>
                                <div class="user-name">
                                  申请人:
                                  <span class="name-text"
                                    >{{item1.perName}}</span
                                  >
                                </div>
                                <div class="use-to">
                                  用途: {{item1.description}}
                                </div>
                              </div>
                            </template>
                            <div
                              class="gray-bg"
                              :style="getGrayBgStyle(item2)"
                            ></div>
                          </el-tooltip>
                        </template>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script src="./js/axios.js"></script>
  <script src="./js/request.js"></script>
  <script src="./config.js"></script>
  <script src="./data.js"></script>

  <script>
    const formatDate = (value) => {
      const date = dayjs(value) || dayjs();
      const day = dayjs(value).day() || dayjs().day();
      let num1,num2
      if(day > 1) {
        num1 = day - 1;
        num2 = 7 - day;
      }

      var start = date.add(-num1, "day").format("YYYY-MM-DD");
      var end = date.add(num2, "day").format("YYYY-MM-DD");
      return `${start}至${end}`;
    };
  </script>

  <script>
    const {
      createApp,
      reactive,
      ref,
      toRef,
      toRaw,
      watch,
      computed,
      onMounted,
      nextTick,
    } = Vue;
 
    const app = createApp({
      setup() {
        const cellRef = ref();
        const offsetLeft = ref(0);
        const grayBgWidth = ref(0);
        const tableConfig2 = ref([]);

        const state = reactive({
          dateType: "daily",
          dailyDate: dayjs().format("YYYY-MM-DD"),
          weekDate: dayjs().format("YYYY-MM-DD"),
          monthDate: dayjs().format("YYYY-MM"),
          weekDateRange: {
            start: '',
            end: '',
          },
          weekInpVis: true,
          disabledClick: false,
          roomsInfo: [],
          roomAppsInfo: [],
          meetingRoomInfo: [],
          cellWidth: 68,
        });
        const activeNames = ref([1]);

        const changeDateType = (type) => {
          nextTick(() => {
            state.cellWidth = cellRef.value[0] && cellRef.value[0].offsetWidth || 39;
          });
          switch (type) {
            case "daily":
              getCurTimeLineLeft();
              break;
            case "weekly":
              initWeekDate();
              break;
            case "monthly":
              initHeaderColumn(state.monthDate);
              break;
            default:
              break;
          }
          query();
        };

        const preDate = () => {
          if (state.dateType === "daily") {
            state.dailyDate = dayjs(state.dailyDate)
              .add(-1, "day")
              .format("YYYY-MM-DD");

              console.log('state.dailyDate', state.dailyDate);
          } else if (state.dateType === "weekly") {
            state.weekDate = dayjs(state.weekDate)
              .add(-7, "day")
              .format("YYYY-MM-DD");
          } else if (state.dateType === "monthly") {
            state.monthDate = dayjs(state.monthDate)
              .add(-1, "month")
              .format("YYYY-MM");
          }
        }
        const nextDate = () => {
          if (state.dateType === "daily") {
            state.dailyDate = dayjs(state.dailyDate)
              .add(1, "day")
              .format("YYYY-MM-DD");
          } else if (state.dateType === "weekly") {
            state.weekDate = dayjs(state.weekDate)
              .add(7, "day")
              .format("YYYY-MM-DD");
          } else if (state.dateType === "monthly") {
            state.monthDate = dayjs(state.monthDate)
              .add(1, "month")
              .format("YYYY-MM");
          }
        }
        const preYear = () => {
          if (state.dateType === "weekly") {
            state.weekDate = dayjs(state.weekDate)
              .add(-1, "year")
              .format("YYYY-MM-DD");
          }
        }
        const nextYear = () => {
          if (state.dateType === "weekly") {
            state.weekDate = dayjs(state.weekDate)
              .add(1, "year")
              .format("YYYY-MM-DD");
          }
        }

        const initWeekDate = (flag) => {
          var x;
          var date;
          if(flag) {
            date = dayjs()
            x = dayjs().day();
            state.weekDate = date.add(1 - x , "day").format("YYYY-MM-DD");
          } else {
            date = dayjs(state.weekDate)
            x = date.day();
            state.weekDate = date.add(1 - x , "day").format("YYYY-MM-DD");
          }
          state.weekDateRange = 
            {
              start: state.weekDate,
              end: dayjs(state.weekDate).add(6, "day").format("YYYY-MM-DD"),
            }
        }

        const handleMonthChange = (val) => {
          const [year, month] = dayjs(val).format("YYYY-MM").split("-");
          tableConfig2.value = getHeaderColumns(year, month);
        };

        const initHeaderColumn = (val) => {
          console.log('val===initHeaderColumn', val);
          const [year, month] = val.split("-");
          tableConfig2.value = getHeaderColumns(year, month);
        };

        const handleWeekChange = (val) => {
          const end = dayjs(val).add(6, "day").format("YYYY-MM-DD");
          state.weekDateRange = {
            start: val,
            end,
          }
          query()
          // console.log('val', state.weekDateRange);
        };

        const toCurrentDate = () => {
          if (state.dateType === "daily") {
            state.dailyDate = dayjs().format("YYYY-MM-DD");
            state.disabledClick = true;
          } else if (state.dateType === "weekly") {
            initWeekDate(true)
            state.disabledClick = true;
          } else if (state.dateType === "monthly") {
            state.monthDate = dayjs().format("YYYY-MM");
            state.disabledClick = true;
          }
        };

        const getCurTimeLineLeft = (type) => {
          switch (state.dateType) {
            case 'daily':
              return {
                left: dayjs().hour() * state.cellWidth + (dayjs().minute() * state.cellWidth) / 60 + 'px',
              }
              break;
            default:
              break;
          }
        }

        const disabled = computed(() => {
          var disabled = false;
          if (state.dateType === "daily") {
            disabled = state.dailyDate === dayjs().format("YYYY-MM-DD");
          } else if(state.dateType === "weekly") {
            const start = state.weekDateRange.start.split('-')[2]
            const now = dayjs().format("YYYY-MM-DD").split('-')[2]
            disabled = now <= +start + 6 && now >= +start
          } else if (state.dateType === "monthly") {
            disabled = state.monthDate === dayjs().format("YYYY-MM");
          }
          return disabled;
        });

        const cellSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
          if (row.colspan) {
            return [1, 18];
          }
        };

        const getStatusStr = (status) => {
          switch (status) {
            case 0:
              return "待审批";
            case 1:
              return "审批通过";
            case 2:
              return "审批未通过";
            case 3:
              return "草稿";
            default:
              return "";
          }
        };

        const getQueryParamsTime = (time) => {
          var paramsTime = {
            startDatetime: "",
            endDatetime: "",
          };
          switch (state.dateType) {
            case "daily":
              paramsTime.startDatetime = state.dailyDate + " 00:00:00";
              paramsTime.endDatetime = dayjs(state.dailyDate).add(1, "day").format("YYYY-MM-DD") + " 00:00:00";
              break;
            case "weekly":
              const week = state.weekDateRange;
              paramsTime.startDatetime = state.weekDateRange.start + " 00:00:00";
              paramsTime.endDatetime = dayjs(state.weekDateRange.end).add(1, "day").format("YYYY-MM-DD") + " 00:00:00";
              break;
            case "monthly":
              paramsTime.startDatetime = state.monthDate + '-' + '1' + " 00:00:00";
              paramsTime.endDatetime = dayjs(state.monthDate).add(1, "month").format("YYYY-MM") + '-' + '1' + " 00:00:00";
              break;
            default:
              break;
            }
          console.log('paramsTime', paramsTime);
          return paramsTime;
        };

        const query = async () => {
          const paramsTime = {...getQueryParamsTime()};
          const params = {
            startDatetime: paramsTime.startDatetime || "2023-12-17 08:00:00",
            endDatetime: paramsTime.endDatetime || "2023-12-18 18:00:00",
          };
          // console.log('params', params);
          // const res = await postApi(`/getxgMeetingRoom?token=0b8a14bf-b686-486c-88f5-4856633918f3`, params)
          // console.log("res1 =====", res1);
          state.roomsInfo = res1.roomsInfo;
          state.roomAppsInfo = res1.roomAppsInfo;
          for (let i = 0; i < res1.roomsInfo.length; i++) {
            state.meetingRoomInfo[i] = Object.assign(
              res1.roomsInfo[i],
              res1.roomAppsInfo[i]
            );
          }
          // console.log("meetingRoomInfo =====", state.meetingRoomInfo);
        };

        const getGrayBgStyle = (item) => {
          const start = getTimeDHM(item.appBeginDate);
          const end = getTimeDHM(item.appEndDate);
          getGrayBgPosition(start, end);
          return {
            left: offsetLeft.value + "px",
            width: grayBgWidth.value + "px",
          };
        };

        const getGrayBgPosition = (start, end) => {
          const sd = start.d;
          const sh = start.h;
          const sm = start.m;
          const ed = end.d;
          const eh = end.h;
          const em = end.m;
          const obj = {
            daily: tableConfig,
            weekly: tableConfig1,
            monthly: tableConfig2.value,
          };
          const shIdx = obj[state.dateType].findIndex(item => item.label.split(":")[0] === sh);
          const ehIdx = obj[state.dateType].findIndex(
            item => item.label.split(":")[0] === eh
          );
          if (state.dateType === "daily") {
            offsetLeft.value =
              shIdx * state.cellWidth + (sm * state.cellWidth) / 60;
            endPosition = ehIdx * state.cellWidth + (em * state.cellWidth) / 60;
            grayBgWidth.value = endPosition - offsetLeft.value;
          } else if (state.dateType === "weekly") {
            offsetLeft.value =
              dayjs(sd).day() * state.cellWidth + (sh * state.cellWidth) / 24;
            endPosition =
              dayjs(ed).day() * state.cellWidth + (eh * state.cellWidth) / 24;
            if (sd === ed && sh === eh) {
              grayBgWidth.value = "5px";
            } else {
              grayBgWidth.value = endPosition - offsetLeft.value > 5 ? endPosition - offsetLeft.value : 5;
            }
          } else if (state.dateType === "monthly") {
            const sday = sd.split("-")[2];
            const eday = ed.split("-")[2];
            offsetLeft.value =
              sday * state.cellWidth + (sh * state.cellWidth) / 24;
            endPosition = sday * state.cellWidth + (eh * state.cellWidth) / 24;
            if (sday === eday && sh === eh) {
              grayBgWidth.value = "2px";
            } else {
              grayBgWidth.value = endPosition - offsetLeft.value > 2 ? endPosition - offsetLeft.value : 2;
            }
            // console.log("grayBgWidth.value", grayBgWidth.value);
          }
        };

        const getTimeDHM = (time) => {
          const timeArr = time.split(" ");
          const d = timeArr[0];
          const hm = timeArr[1];
          const [ h, m ] = hm.split(":");
          return { d, h, m };
        };

        onMounted(() => {
          nextTick(() => {
            state.cellWidth = cellRef.value[0].offsetWidth || 39;
          });
          query();
          getCurTimeLineLeft()
        });

        watch(
          () => state.dailyDate,
          () => {
            query();
          }
        );
        // watch(
        //   () => state.weekDate,
        //   () => {
        //     query();
        //   }
        // );
        watch(
          () => state.monthDate,
          () => {
            query();
          }
        );

        return {
          state,
          formatDate,
          handleWeekChange,
          tableConfig,
          tableConfig1,
          tableConfig2,
          toCurrentDate,
          cellSpanMethod,
          activeNames,
          getStatusStr,
          cellRef,
          offsetLeft,
          grayBgWidth,
          getGrayBgStyle,
          handleMonthChange,
          changeDateType,
          disabled,
          getCurTimeLineLeft,
          preDate,
          nextDate,
          preYear,
          nextYear
        };
      },
    });

    // app.use(ElementPlus, {
    //   locale: ElementPlusLocaleZhCn,
    // })
    app.use(ElementPlus, { locale: zhCn }).mount("#app");
  </script>
</html>
